<template>
	<view class="details pB50">
		<!-- <view class="details-top pT10" v-if="choosetype=='2'"><image :src="appointmentDetails.vister_personimg | personimg"></image></view> -->
		
			<!-- 预约 2,受访1 -->
			<view class="details-message pT10">
				<p class="bold pB10">访客信息</p>
				<view class="bg_white"><div class="details-top pB10" ><image :src="appointmentDetails.vister_personimg | personimg"  mode="aspectFill"></image></div></view>
				<view class="details-message-name">访客姓名：{{appointmentDetails.vister_name}}</view>
				<view class="details-message-sex" v-if="appointmentDetails.vister_sex==1">访客性别：男</view>
				<view class="details-message-sex" v-if="appointmentDetails.vister_sex==2">访客性别：女</view>
				<view class="details-message-number" v-if="appointmentDetails.vister_identitycard | isidcard">身份证号：{{appointmentDetails.vister_identitycard | isidcard}}</view>
				<view class="details-message-phone">访客电话：{{appointmentDetails.vister_mobile}}</view>
				<view class="details-message-phone" v-if="appointmentDetails.carnumber">车牌号码：{{appointmentDetails.carnumber}}</view>
				<view class="intervieweeInformation-reason">来访缘由：{{appointmentDetails.app_reson}}</view>
				
				
			</view>
			
				<view class="intervieweeInformation pT10">
					<p class="bold pB5">受访人信息</p>
					
					<view class="intervieweeInformation-company">受访公司：{{appointmentDetails.app_company_name}}</view>
					<view class="intervieweeInformation-location">受访部门：{{appointmentDetails.app_address}}</view>
					<view class="intervieweeInformation-name">受访人员：{{appointmentDetails.app_user_name}}</view>
					<view class="intervieweeInformation-name">电话号码：{{appointmentDetails.app_mobile}}</view>
					<view class="intervieweeInformation-time">预约开始：{{retime(appointmentDetails.app_visittime)}}</view>
					<view class="intervieweeInformation-time">预约结束：{{retime(appointmentDetails.app_endvisittime)}}</view>
					
				</view>
				
			
			
			
		<!-- </view> -->
		<view class="statusInformation pT10">
			<p class="bold pB5">邀请动态</p>
			<view class="status">
				<view class="status-information">到访状态：{{appointmentDetails.m_tips}}</view>
				<view class="" v-if="time_streamlist.length != 0">
					<view class="status-information pB5 " v-for="item in time_streamlist"
						:class="item.type=='2'?'statusEND':''"
						v-if="item.tips=='提交时间' || item.tips=='受访人员' || item.tips=='访客确认' || item.tips=='访客姓名' || item.tips=='取消原因'  || item.tips=='查看时间'">
						<view class="left">{{item.tips}}：</view>
						<view class="right">{{item.value}}</view>
					</view>
				</view>
		
			</view>
		
		</view>
		<view class="statusInformation pT10" v-if="time_streamlist[7]">
			<p class="bold pB5">来访动态</p>
			<view class="status">
				<!-- <view class="status-information">到访状态：{{appointmentDetails.m_tips}}</view> -->
				<view class="" v-if="time_streamlist.length != 0">
					<view class="status-information pB5 " v-for="item in time_streamlist"
						:class="item.type=='2'?'statusEND':''"
						v-if="item.tips=='保安扫码' || item.tips=='保安人员' || item.tips=='确认离开' ||item.tips=='取消进入' || item.tips=='取消缘由'">
						<view class="left">{{item.tips}}：</view>
						<view class="right">{{item.value}}</view>
					</view>
				</view>
		
			</view>
		
		</view>
		<view class="statusInformation pT10" v-if="appointmentDetails.healthy_img">
			<p class="bold pB5">点击查看该访客粤康码图片</p>
			<view class="status bg_white"  style="padding: 10px;">									
					<view class="user-imgshow" @click="previewImg(appointmentDetails.healthy_img)">
						<image  :src="appointmentDetails.healthy_img" style="width: 200upx; height: 200upx; background-color:  #ebebeb;"/>
					</view>
			</view>
		</view>
		<view class="statusInformation pT10" v-if="time_streamlist[10]">
			<p class="bold pB5">到访动态</p>
			<view class="status">
				<!-- <view class="status-information">到访状态：{{appointmentDetails.m_tips}}</view> -->
				<view class="" v-if="time_streamlist.length != 0">
					<view class="status-information pB5" v-for="item in time_streamlist"
						:class="item.type=='2'?'statusEND':''" v-if="item.tips=='扫码接待' || item.tips=='接待人员' || item.tips=='接待完成' ">
						<view class="left">{{item.tips}}：</view>
						<view class="right">{{item.value}}</view>
					</view>
				</view>
		
			</view>
		
		</view>
		<view class="btn-button">
			<view class="cancel" v-if="canelappchanger" @click="refuse()">取消预约</view>
			<view class="Approved" v-if="btnstate!='YES'" @click="backrefresh()">返回</view>
			
		</view>
		<!-- 底部导航 -->
		<footernav :pagePath='showstate'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
	
	import {appointmentrefuse,arrivearrive_info} from '../../common/api/appointment.js'; //引进requst方法
	import {timestampToTime} from '@/common/common.js'
	export default {
		data() {
			return {
				//状态(1-已不接受,2-已接受,3-已确认)
				canelappchanger:false,
				appointment:'',
				appointmentDetails:[],
				btnstate:'',
				time_streamlist:[],
				choosetype:'2',
				showstate:'myyuyue',
			};
		},
		onLoad(options){
			
			if(options.btnstate!=""){
				this.btnstate = options.btnstate;
			}
			if(options.appinfo){
				this.appointmentDetails = JSON.parse(options.appinfo)
			}
			this.showstate='myyuyue';
			uni.setNavigationBarTitle({
			　　title:'预约详情'
			})
			if(options.id){
				
				arrivearrive_info({'meetingid': options.id}).then(res=>{
					if (res.data.code == 400) {
						uni.showModal({
							title: '',
							content:res.data.message,						
							showCancel:false,
							confirmText: "确定",
							success: function (res) {
								if (res.confirm) {
									uni.reLaunch({
										url: '/pages/comster/comster_adu'
									});
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});	
					    return;
					}
					this.appointmentDetails=res.data.data;
					this.appointment=res.data.data;
					
					if(res.data.data.time_stream){
						console.log(res.data.data.time_stream)
						this.time_streamlist=res.data.data.time_stream;
					}else{
						console.log('234')
					}
					
					if(this.appointmentDetails.m_status == 0&&this.appointmentDetails.arrive_status == 0){
						this.canelappchanger = true;
					}else if(this.appointmentDetails.m_status == 6&&this.appointmentDetails.arrive_status == 0){
						this.canelappchanger = true;
					}else if(this.appointmentDetails.m_status == 7&&this.appointmentDetails.arrive_status == 0){
						this.canelappchanger = true;
					}
				})
			}
			// if(this.appointmentDetails.appointment_status == 1){
			// 	this.canelappchanger = true;
			// }
			
			
			
			// if(this.appointmentDetails.meeting_status == 0){
			// 	this.canelappchanger = true;
			// }
			// if(this.appointmentDetails.auditing == 1){
			// 	this.canelappchanger = true;
			// }
			// var app_visittimeon=Number(this.appointmentDetails.app_visittime)*1000;
			// if(app_visittimeon> (Date.parse(new Date())/1000)){
			// 	this.canelappchanger = true;
			// }
			console.log(this.appointmentDetails.status)
		},
		methods: {
			previewImg(logourl) {
				if(logourl){
					let _this = this;
					let imgsArray = [];
					imgsArray[0] = logourl
					uni.previewImage({
						current: 0,
						urls: imgsArray
					});
				}
			},
			// addrefuse(){
			// 	appointmentrefuse({refusereson:"123",id:this.appointmentDetails.id}).then(res=>{
			// 		console.log(res)
			// 	})
			// }
			refuse(){
				/*check  app status---------提示----------getget*/
				uni.navigateTo({
					url: '/pages/yaoqing/invitationRefuse?id='+this.appointmentDetails.appointmentid+'&choosetype=cvis&skipstate=c_adu&type=2',
				});
			},
			retime(time){
				return timestampToTime(time)
			},
			/*检查状态*/
			checkstatus(e){
				// console.log(this.getlist[e])
				let iteminfo = this.appointmentDetails;
				// if(iteminfo.m_status==0){
				// 	return '待访问';
				// }else if(iteminfo.m_status==1){
				// 	return '已访问';
				// }else if(iteminfo.m_status==2){
				// 	return '已逾期';
				// }else if(iteminfo.m_status==3){
				// 	return '已逾期';
				// }else if(iteminfo.m_status==4){
				// 	return '已暂停';
				// }else if(iteminfo.m_status==5){
				// 	return '不接受';
				// }else if(iteminfo.m_status==6){
				// 	return '已接受';
				// }else if(iteminfo.m_status==7){
				// 	return '已审核';
				// }else if(iteminfo.m_status==8){
				// 	return '待审核';
				// }else if(iteminfo.m_status==9){
				// 	return '审核不过';
				// }else if(iteminfo.m_status==10){
				// 	return '待审核';
				// }else if(iteminfo.m_status==11){
				// 	return '待确认';
				// }else if(iteminfo.m_status==12){
				// 	return '已取消';
				// }else if(iteminfo.m_status==13){
				// 	return '待答题';
				// }
				if(iteminfo.m_status==9){ 
					return '不同意';
				}else if(iteminfo.m_status==12){
				 	return '取消预约';
				}else{
					return '同意接待';
				}
			},
		}
	}
	
	
</script>

<style lang="scss" scoped>
.details {
	color: rgba(80, 80, 80, 1);
	font-size: 15px;
	width: 100%;
	background-color: #efeff4;
	.details-top {
		width: 80px;
		height: 80px;
		left: 148px;
		top: 105px;
		font-size: 117px;
		color: rgba(153, 153, 153, 1);
		// border: 1px solid;
		margin: auto;
		margin-top: 10px;
		
		
	}
	.details-top image{
    height: 80px;
    width: 80px;
    position: absolute;
	background: #fff;
    border-radius: 50%;
	}
	.details-message {
		width: 95%;
		margin: auto;
		uni-view {
			margin: 0px 0;
			padding: 10px;
			background-color: #fff;
			border-bottom: 1px solid #eee;
		}
	}
	.intervieweeInformation {
		width: 95%;
		margin: auto;
		uni-view {
			margin: 0px 0;
			padding: 10px;
			background-color: #fff;
			border-bottom: 1px solid #eee;
		}
	}
	.statusInformation {
		width: 95%;
		margin: auto;
		.status-information {
			display: flex;
			margin: 0px 0;
			padding:5px 10px;
			background-color: #fff;
			border-bottom: 1px solid #eee;
			
			.right {
				margin-left: 0px;
			}
		}
		.statusEND{padding-bottom:10px;border-bottom: 1px solid #9e9e9e;}
	}
	.btn-button {
		display: flex;
		width: 70%;
		margin:0 auto;
		justify-content: space-around;
		margin: 10px auto;
		uni-view {
			color: rgba(255, 255, 255, 1);

			border-radius: 18px;
			// font-size: 11px;
			padding: 5px 20px;
		}
		.cancel {
			background-color: rgba(212, 48, 48, 1);
		}
		.Approved {
			background-color: rgba(42, 130, 228, 1);
		}
		.Confirm {
			background-color: rgba(128, 128, 128, 1);
		}
	}
}
</style>
